<template>
  <div class="SalesDetail">
    <!-- 头部 --state-->
    <div class="side_1"></div>
    <span class="add_1">销售计划</span>
    <div class="btn">
      <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="Fh"
      >返回
      </el-button
      >
    </div>
    <!-- 头部 --end-->
    <div class="addplan_box">
      <div class="from_sex">
        <ul>
          <li>
            <span>计划年份</span>
            <el-input v-model.number="ListAdd.year" style="width: 70%" oninput="value=value.replace(/[^\d.]/g,'')"></el-input>
          </li>
          <li>
            <span>计划月份</span>
            <el-select v-model="ListAdd.month" style="width: 70%;">
              <el-option v-for="it in yuefenlist" :key="it.value" :label="it.lable" :value="it.value"></el-option>
            </el-select>
<!--            <el-input v-model.number="ListAdd.month" style="width: 70%" oninput="value=value.replace(/[^\d.]/g,'')"></el-input>-->
          </li>
          <li>
            <el-button type="warning" size="medium" @click="getList()">查询</el-button>
          </li>
        </ul>
      </div>

      <!--          <el-col :span="4">-->
      <!--            <el-form-->
      <!--              :model="formInline"-->
      <!--              class="demo-form-inline"-->
      <!--              label-width="83px"-->
      <!--            >-->
      <!--              <el-form-item label="编号">-->
      <!--                <el-input v-model="formInline.bianhao"></el-input>-->
      <!--              </el-form-item>-->
      <!--            </el-form>-->
      <!--          </el-col>-->
      <!--          <div class="from_btn">-->
      <!--            <el-button-->
      <!--              type="warning"-->
      <!--              size="medium"-->
      <!--              @click="dialogVisible = true"-->
      <!--              >分发</el-button-->
      <!--            >-->
      <!--          </div>-->
      <!--            -->

      <div class="addplan_table">
        <template>
          <el-table :data="ListData">
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="60"
            >
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户名称" prop="clientName" align="center" width="160">
              <!--              <template slot-scope="scope">-->
              <!--                <el-input v-model="scope.row.clientName"></el-input>-->
              <!--              </template>-->
            </el-table-column>
            <el-table-column align="center" prop="productTuhao" label="产品图号" width="85">
              <!--              <template slot-scope="scope">-->
              <!--                <el-input v-model="scope.row.productTuhao"></el-input>-->
              <!--              </template>-->
            </el-table-column>
            <el-table-column label="产品名称" prop="productName" align="center" width="85">
              <!--              <template slot-scope="scope">-->
              <!--                <el-input v-model="scope.row.productName"></el-input>-->
              <!--              </template>-->
            </el-table-column>
            <!--            <el-table-column label="销量需求" align="center" width="100">-->
            <!--&lt;!&ndash;              <template slot-scope="scope">&ndash;&gt;-->
            <!--&lt;!&ndash;              <el-input v-model="scope.row.number"></el-input>&ndash;&gt;-->
            <!--              &lt;!&ndash;              </template>&ndash;&gt;-->
            <!--            </el-table-column>-->
            <el-table-column label="需求时间及数量" align="center">
              <el-table-column

                label="1"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '01'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="2"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '02'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="three"
                label="3"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '03'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="four"
                label="4"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '04'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="five"
                label="5"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '05'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="six"
                label="6"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '06'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="seven"
                label="7"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '07'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="eight"
                label="8"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '08'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="nine"
                label="9"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '09'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="ten"
                label="10"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '10'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="eleven"
                label="11"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '11'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="twelve"
                label="12"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '12'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="thirteen"
                label="13"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '13'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="fourteen"
                label="14"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '14'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="fifteen"
                label="15"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '15'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="sixteen"
                label="16"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '16'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="seventeen"
                label="17"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '17'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="eighteen"
                label="18"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '18'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="nineteen"
                label="19"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '19'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="twenty"
                label="20"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '20'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="twenty-one"
                label="21"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '21'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="twenty-two"
                label="22"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '22'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="twenty-three"
                label="23"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '23'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="24"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '24'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="25"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '25'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="26"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '26'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="27"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '27'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="28"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '28'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="29"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '29'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="30"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '30'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                label="31"
                align="center"
                width="55"
              >
                <template slot-scope="scope">
                  <span v-for="(item,index) in scope.row.procutNumbers" :key="index">
                    <span v-if="item.yaohuoTime == '31'">
                    {{ item.number }}
                  </span>
                  </span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column
              prop="numberSum"
              label="本月合计"
              align="center"
              width="85"
            ></el-table-column>
            <!--            <el-table-column-->
            <!--              prop="note"-->
            <!--              label="备注"-->
            <!--              align="center"-->
            <!--              width="100"-->
            <!--            ></el-table-column>-->
          </el-table>
        </template>
      </div>
    </div>
    <!--    <el-dialog-->
    <!--      title-->
    <!--      :visible.sync="dialogVisible"-->
    <!--      width="55%"-->
    <!--      :modal-append-to-body="false"-->
    <!--    >-->
    <!--      <div class="table_dia">-->
    <!--        <el-table :data="tableDatas" border>-->
    <!--          <el-table-column-->
    <!--            prop="first"-->
    <!--            label="第一周(2日-8日)"-->
    <!--            align="center"-->
    <!--          ></el-table-column>-->
    <!--          <el-table-column-->
    <!--            prop="second"-->
    <!--            label="第二周(9日-15日)"-->
    <!--            align="center"-->
    <!--          ></el-table-column>-->
    <!--          <el-table-column-->
    <!--            prop="third"-->
    <!--            label="第三周(16日-22日)"-->
    <!--            align="center"-->
    <!--          ></el-table-column>-->
    <!--          <el-table-column-->
    <!--            prop="fourth"-->
    <!--            label="第四周(22日-23日)"-->
    <!--            align="center"-->
    <!--          ></el-table-column>-->
    <!--          <el-table-column-->
    <!--            prop="fifth"-->
    <!--            label="第五周(24日-30日)"-->
    <!--            align="center"-->
    <!--          ></el-table-column>-->
    <!--        </el-table>-->
    <!--      </div>-->
    <!--    </el-dialog>-->
    <div class="box_btn">
      <el-button class="bm_btn" onclick="window.history.go(-1)" type="info"
      >返回
      </el-button
      >
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      ListAdd: {
        year: "",
        month: "",
      },
      ListData: [],
      yuefenlist:[
        {value:1,lable:1},
        {value:2,lable:2},
        {value:3,lable:3},
        {value:4,lable:4},
        {value:5,lable:5},
        {value:6,lable:6},
        {value:7,lable:7},
        {value:8,lable:8},
        {value:9,lable:9},
        {value:10,lable:10},
        {value:11,lable:11},
        {value:12,lable:12},
      ],
      zohe:"",
    };
  },
  created() {
  },
  methods: {
    getList() {
      if (this.ListAdd.year== "") {
        this.$message.error("请输入年份");
        return;
      }else if (this.ListAdd.month=== ""){
        this.$message.error("请输入月份");
        return;
      }
      console.log(this.ListAdd.month)
      axios
      (
        "/JX_java/sales/salesPlan/getSalePlanProcuts?year=" + parseInt(this.ListAdd.year) + "&&month=" + parseInt(this.ListAdd.month))
        .then((res) => {
          const relse = res.data.data
          console.log(relse)
          this.ListData = relse;
          this.procutNumbers = relse.procutNumbers
          for (let i = 0; i < relse.length; i++) {
            this.procutNumbers = relse[i].procutNumbers
            const zoheadd  = []
            for (let j = 0; j < relse[i].procutNumbers.length; j++) {
              this.zoheadd = relse[i].procutNumbers[j].number
              console.log(this.zoheadd)
              for (let m=0 ; m<this.zoheadd.length; m++) {

                console.log(this.zoheadd[i]++)

              }
            }
          }

          // console.log(this.procutNumbers)
        });
    },
    //返回
    Fh() {
      window.history.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.side_1 {
  width: 5px;
  height: 16px;
  background-color: $Header_color;
  margin-left: 10px;
  margin-top: 20px;
}

.add_1 {
  margin-left: 20px;
  margin-top: -20px;
  float: left;
  font-size: 18px;
  font-weight: 400;
}

.btn_fanhui {
  margin-top: -20px;
  margin-right: 20px;
  float: right;
}

.addplan_box {
  background: $white;
  width: 98%;
  margin-left: 20px;
  //   padding: 0 1%;
  margin-top: 50px;
  // margin-left: 10px;
  border: 1px solid $bordercolor;
  border-radius: 4px;
  height: 670px;

  .addplan_table {
    margin-top: 30px;
    width: 98%;

    margin-left: 10px;
  }
}

.btn {
  float: right;
}
</style>
<style lang="scss" scoped>
.addplan_title .el-input__inner {
  background: rgba(242, 242, 242, 1);
  border-color: rgba(220, 222, 226, 1);
}

.el-input__inner:hover {
  border-color: rgba(128, 134, 149, 1);
}

.addplan_table .el-input__inner {
  background: rgba(242, 242, 242, 1);
  border-color: rgba(220, 222, 226, 1);
  width: 90%;
  height: 35px;
  text-align: center;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 13px;
  color: #333;
}

.addplan_table .el-table thead.is-group th {
  background: none;
  color: #333;
}

.addplan_table .el-table th > .cell {
  text-align: center;
  padding: 0;
}

.addplan_table .el-table td,
.el-table th {
  padding: 0;
  height: 45px;
}

/* .addplan_table .el-table .cell {
  line-height: normal;
  padding: 0;
} */
.addplan_table .el-table .cell,
.el-table--border td:first-child .cell,
.el-table--border th:first-child .cell {
  padding: 0;
}

.table_dia .el-table th {
  background: rgba(242, 242, 242, 1);
  color: #333;
  height: 25px;
}

.from_btn {
  margin-left: 94%;
}

.from_sex {
  margin-top: 20px;
}

.box_btn {
  text-align: center;
  margin-top: 20px;
}

.from_sex {
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-left: 20px;
  }
}
/deep/.el-table .cell{
  font-size: 12px;
  //padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap
}
/deep/ .el-table .cell:hover{
  display: inline-block;
  padding: 0;
  overflow: visible;
}
</style>
